<!--
* @Description: 系统消息管理 - 表单
* @Author: DHL
* @Date: 2022-11-27 15:51:45
 * @LastEditors: dhlleo dhlleo@126.com
 * @LastEditTime: 2022-12-03 09:42:01
-->
<template>
  <tw-drawer v-model="visible" :title="title" :loading="loading" size="80%" @close="handleClose">
    <el-form
      ref="dbFormRef"
      :model="dbForm"
      :rules="rules"
      label-width="90px"
      :disabled="action === 'view'"
      class="form-wrap"
    >
      <el-form-item label="项目" prop="projectId">
        <el-select v-model="dbForm.projectId" filterable placeholder="请选择项目">
          <el-option
            v-for="item in state.projectList"
            :key="item.id"
            :label="`${item.name}`"
            :value="`${item.id}`"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input v-model="dbForm.title" clearable placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="消息类型" prop="type">
        <el-radio-group v-model="dbForm.type">
          <el-radio-button
            v-for="(item, index) in state.messageType"
            :key="item.id"
            :label="item.dataValue"
          >
            {{ item.dataName }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="优先级" prop="priority">
        <el-radio-group v-model="dbForm.priority">
          <el-radio-button
            v-for="(item, index) in state.messagePriority"
            :key="item.id"
            :label="item.dataValue"
          >
            {{ item.dataName }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="接收方类型" prop="receivorType">
        <el-radio-group v-model="dbForm.receivorType" @change="handleChangeReceivorType">
          <el-radio-button
            v-for="(item, index) in state.messageReceivorType"
            :key="item.id"
            :label="item.dataValue"
          >
            {{ item.dataName }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="选择部门"
        prop="receivorIds"
        v-if="['2', '3'].includes(dbForm.receivorType)"
      >
        <div>
          <el-popover
            placement="right-start"
            title="接收部门"
            :width="300"
            trigger="click"
            @show="handleOrgTreeShow"
          >
            <div class="org-tree-warp">
              <organizationTree
                ref="orgTreeRef"
                :draggable="false"
                :multiple="true"
                @nodeClick="handleNodeClick"
              ></organizationTree>
            </div>

            <template #reference>
              <el-button type="primary">选择部门</el-button>
            </template>
          </el-popover>

          <div class="org-name-tag">
            <el-tag
              v-for="item in state.receivorOrgList"
              :key="item.id"
              size="large"
              closable
              @close="handleOrgDelete(item)"
            >
              {{ item.name }}
            </el-tag>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="选择接收人" prop="receivorIds" v-if="dbForm.receivorType === '4'">
        <div>
          <el-button type="primary" @click="handleSelectUserOpen">选择人员</el-button>

          <div class="user-name-tag">
            <el-tag
              v-for="item in state.receivorUserList"
              :key="item.id"
              size="large"
              closable
              @close="handleUserDelete(item)"
            >
              {{ item.name }}
            </el-tag>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <Tinymce v-model="dbForm.content" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleReset(true)">取 消</el-button>
      <el-button v-if="action === 'add'" type="warning" @click="handleSubmit(true)">
        提交并发布
      </el-button>
      <el-button v-if="action !== 'view'" type="primary" @click="handleSubmit(false)">
        提 交
      </el-button>
    </template>
  </tw-drawer>

  <selectUser ref="selectUserRef" @submit="handleSubmitSelectUser"></selectUser>
</template>

<script src="./useForm.ts"></script>

<style scoped lang="scss">
  .form-wrap {
    padding: 20px;

    .org-name-tag {
      .el-tag {
        margin: 8px 8px 8px 0px;
      }
    }
  }

  .user-name-tag {
    .el-tag {
      margin: 8px 8px 8px 0px;
    }
  }

  .org-tree-warp {
    height: 400px;
  }
</style>
